<html>
	<head>
		<title>优惠购车</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/basic.css">
		<link rel="stylesheet" type="text/css" href="../css/style.css">
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css" />
		<style type="text/css">
			.buyCar .tab-all{
				height: 53px;
				line-height: 53px;
			}
			.buyCar .tab-all .tab-list{
				margin-right: 20px;
				font-size: 14px;
				color: #73717d;
			}
			.buyCar .tab-all .tab-list.active{
				position: relative;
				font-size: 20px;
				font-weight: bold;
				color: #212121;
			}
			.buyCar .tab-all .tab-list.active::after{
				content: '';
				position: absolute;
				bottom: 5px;
				left: 12px;
				width: 15px;
				height: 5px;
				border-radius: 3px;
				background-color: #e35c23;
			}
		</style>
	</head>
	<body>
		<header>
			<p>优惠购车</p>
		</header>
		<div class="buyCar ">
			<img src="../image/buyCar.png" style="width: 100%;height: 210px;" />
			<div class="buyCar_content padd15">
				<div class="tab-all flex_center_start">
					<div class="tab-list active">推荐</div>
					<div class="tab-list" id="showCityPicker" data-type="1">品牌</div>
					<div class="tab-list" data-type="2">价格</div>
					<div class="tab-list" data-type="3">类别</div>
				</div>
				<div class="search-goods">
					<!-- 搜索出来的产品 -->
					<div class="group-all flex_center_start">
						<div class="group-list">
							<div class="img-box">
								<img src="../image/car1.jpg" />
							</div>
							<div class="info">
								<h3>奥迪A4L</h3>
								<p>本期<b>6590</b>人已报名</p>
								<button>去报名</button>
							</div>
						</div>
						<div class="group-list">
							<div class="img-box">
								<img src="../image/car1.jpg" />
							</div>
							<div class="info">
								<h3>奥迪A4L</h3>
								<p>本期<b>6590</b>人已报名</p>
								<button>去报名</button>
							</div>
						</div>
						<div class="group-list">
							<div class="img-box">
								<img src="../image/car1.jpg" />
							</div>
							<div class="info">
								<h3>奥迪A4L</h3>
								<p>本期<b>6590</b>人已报名</p>
								<button>去报名</button>
							</div>
						</div>
					</div>
					<!--没有搜到相关车辆信息时显示 -->
					<div class="zanwu">
						<img src="../image/none.png" />
						<p>找不到您要的车型，换个词试试吧</p>
					</div>
				</div>
			</div>
			
		</div>
		<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/mui.picker.min.js"></script>
		<script type="text/javascript" src="../js/mui.poppicker.js"></script>
		<script src="../js/city.data.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(".tab-all").on("click",".tab-list",function(){
				let type = $(this).attr("data-type");
				console.log(type);
				$(this).addClass("active").siblings().removeClass("active");
				if(type == 1){
					var cityPicker = new mui.PopPicker({
						layer: 2
					});
					cityPicker.setData(cityData);
					// var showCityPickerButton = document.getElementById('showCityPicker');
					// var cityResult = doc.getElementById('cityResult');
					// showCityPickerButton.addEventListener('tap', function(event) {
						cityPicker.show(function(items) {
							console.log(items[0].text + " " + items[1].text)
							// cityResult.value = items[0].text + " " + items[1].text;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					// }, false);
				}else{
					let data=[]
					if(type == 2){
						data=[{
						value: 'ymt',
						text: '云天明'
					}, {
						value: 'shq',
						text: '史强'
					}, {
						value: 'zhbh',
						text: '章北海'
					}, {
						value: 'zhy',
						text: '庄颜'
					}, {
						value: 'gyf',
						text: '关一帆'
					}, {
						value: 'zhz',
						text: '智子'
					}, {
						value: 'gezh', 
						text: '歌者'
					}]
					}else{
						data = [{
							value: 'ywj',
							text: '董事长 叶文洁'
						}, {
							value: 'aaa',
							text: '总经理 艾AA'
						}, {
							value: 'lj',
							text: '罗辑'
						}, {
							value: 'ymt',
							text: '云天明'
						}]
					}
					var _getParam = function(obj, param) {
						return obj[param] || '';
					};
					//普通示例
					var userPicker = new mui.PopPicker();
					userPicker.setData(data);
					// var showUserPickerButton = doc.getElementById('showUserPicker');
					// var userResult = doc.getElementById('userResult');
					// showUserPickerButton.addEventListener('tap', function(event) {
						userPicker.show(function(items) {
							console.log(items[0].text)
							// userResult.value = items[0].text;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					// }, false);
				}
			})
		</script>
		<script type="text/javascript">
			(function($, doc) {
				$.init();
				$.ready(function() {
					/**
					 * 获取对象属性的值
					 * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
					 * @param {Object} obj 对象
					 * @param {String} param 属性名
					 */
					
				});
			})(mui, document);
		</script>
	</body>
</html>